<script>
import {login, signOut, viewPersonalInformation} from "@/api/http";
import {mapState} from "vuex";

export default {
  name: "headerYun",
  data(){
    return {
      // visible: false,
      formInline: {
        username: '',
        password: '',
        // rememberMe:true
      },
      //   是否登录
      // isLogin: false,
      //   个人信息
      // userInfo: {}
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      visible: state => state.user.visible,
      isLogin: state => state.user.isLogin,
    })
  },
  methods:{
    handleSubmit() {
      console.log(this.formInline);
      // login(this.formInline).then(res=>{
      login({...this.formInline,rememberMe:true}).then(res=>{
        console.log(res)
        if (res.code === 0) {
          // this.visible = false;
          this.$store.commit('setVisible', false)
          this.isLogin = true;
          // this.userInfo = res.userInfo
          this.$store.commit('setUserInfo', res.userInfo)
          this.$message.success('登录成功');
          this.$store.commit('setIsLogin', true)
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    // 对话框
    showModal() {
      // this.visible = true;
      this.$store.commit('setVisible', true)

    },

    handleOk(e) {
      console.log(e);
      // this.visible = false;
      this.$store.commit('setVisible', false)
    },

    //   退出登录
    logOut() {
      signOut().then(res => {
        console.log(res)
        if (res.code === 0) {
          // this.isLogin = false;
          this.$message.success('退出登录成功');
          this.$store.commit('setIsLogin', false)
        }
      })
    },

    //   查看个人信息
    viewInfo(){
      viewPersonalInformation().then(res=>{
        console.log(res,'查看个人信息')
        if(res.code===0) {
          // this.userInfo=res.data
          this.$store.commit('setUserInfo', res.data)
          // this.isLogin = true;
          this.$store.commit('setIsLogin', true)
        }else {
          // this.isLogin = false;
          this.$store.commit('setIsLogin', false)
        }
      })
    },
    cancel() {
      this.$store.commit('setVisible', false)
    }
  },

  created() {
    this.viewInfo()
    // console.log(this.$store.state.user.userInfo,'user')
    // console.log(this.userInfo,'user123')
  }

}
</script>

<template>
<div>
  云课堂头部
  <a-button type="primary" @click="showModal" v-if="!isLogin">
    登录/注册
  </a-button>

  <a-dropdown v-else>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      <a-avatar :src="userInfo.avatarUrl" />
      {{ userInfo.nickname }}
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <router-link to="/person">个人中心</router-link>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;">我的订单</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;" @click="logOut">退出登录</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>

  <a-modal v-model="visible"  @ok="handleOk" :footer="null" width="350px"  @cancel="cancel">
    <a-form-model layout="horizontal" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
      <a-form-model-item>
        <a-input v-model="formInline.username" placeholder="Username">
          <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-input v-model="formInline.password" type="password" placeholder="Password">
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button
            type="primary"
            html-type="submit"

        >
          登录
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</div>
</template>

<style scoped lang="less">
//深层覆盖
/deep/.ant-modal-body {
  padding: 40px 40px 10px;
}
</style>